<template>
  <div class="more">
    <div
      class="btn-circle"
      @mouseenter="circleshow($event)"
      @mouseleave="circlehide($event)"
      @click="addEvent"
    >
      <slot name="tit"></slot>
      <i class="btn-circle-hover" :style="styleData"></i>
    </div>
  </div>
</template>
<script>
export default {
  name: "btn_cricle",
  data() {
    return {
      styleData: {
        top: "0px",
        left: "0px",
        width: "0",
        height: "0",
        opacity: 1,
        transition: ""
      },
      parentOffset: 0,
      relX: 0,
      relY: 0,
      circler_width: 0
    };
  },
  methods: {
    circleshow(e) {
      this.styleData.left = e.pageX - e.target.offsetLeft + "px";
      this.styleData.top = e.pageY - e.target.offsetTop + "px";
      this.styleData.width = e.target.clientWidth * 2 + "px";
      this.styleData.height = e.target.clientWidth * 2 + "px";
      this.styleData.opacity = 1;
      this.styleData.transition = "width .8s, height .8s, opacity .8s";
    },
    circlehide(e) {
      this.styleData.left = e.pageX - e.target.offsetLeft + "px";
      this.styleData.top = e.pageY - e.target.offsetTop + "px";
      this.styleData.width = 0;
      this.styleData.height = 0;
      this.styleData.opacity = 1;
      this.styleData.transition = "width .6s, height .6s, opacity 1.3s";
    },
    addEvent() {
      this.$emit("addClick", this.styleData);
    }
  }
};
</script>
<style lang="less">
.btn-circle {
  width: 100%;
  height: 40px;
  background-color: #ff6600;
  border: 1px solid #ff6600;
  font-size: 14px;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  &:hover {
    span {
      color: #ff6600;
      z-index: 22;
    }
  }
  span {
    .posc;
    .cf;
  }
  .btn-circle-hover {
    position: absolute;
    z-index: 0;
    display: block;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);
    width: 0;
    height: 0;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
  }
}
</style>